<template>
    <div class="area-wrapper">
        <div class="area-1"></div>
        <div class="area-2"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [{
                    title: "",
                    toolTip: "",
                    data: [8, 14, 2, 5, 15, 10, 8,14],
                    color: 0xffff77,
                }, {
                    title: "",
                    toolTip: "",
                    data: [5, 10, 24, 15, 12, 18, 9, 16],
                    color: 0x33ccff,
                },
                {
                    title: "",
                    toolTip: "",
                    data: [10, 30, 24, 20, 43, 26, 20, 13],
                    color: 0xff88c2,
                },
            ],
        };
    },
    mounted() {
        this.drawLChart("area", "area-1", this.data, {
            cameraOpt: {
                fov: 30,
                width: 400,
                height: 400,
                position: {
                    x: 2,
                    y: 1.2,
                    z: 3,
                },
            },
        });
        this.drawLChart("area", "area-2", this.data, {
            manifest: {
                smooth: true
            },
            cameraOpt: {
                fov: 30,
                width: 400,
                height: 400,
                position: {
                    x: 2,
                    y: 1.2,
                    z: 3,
                },
            },
        });
    },
    methods: {

    }
};
</script>

<style lang="scss">
.area-wrapper {
    display: flex;
    flex-wrap: wrap;
}
</style>
